<template>
	<view>
		<view class="con">
			<view class="qrbox">
				<view class="qrimg">
					<tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
				</view>
				<view class="" style="color: #4D5665;font-size: 30rpx;text-align: center;font-weight: bold;">
					分享好友  打开首页扫一扫
				</view>
				<view class="" style="color: #4D5665;font-size: 24rpx;text-align: center;margin-top: 30rpx;">
					好友扫码 输入数量即可直接转赠惠值积分
				</view>
			</view>
			<view class="btn" @click="saveQrcode">
				<image style="width: 34rpx;height: 34rpx;margin-right: 19rpx;" src="/pages/tongz/static/save.png" mode=""></image>
				保存二维码
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				ifShow: true,
				val: '/pages/tongz/subgift?id='+uni.getStorageSync('userinfo').user_id, // 要生成的二维码值
				size: 348, // 二维码大小
				unit: 'rpx', // 单位
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			};
		},
		methods:{
			qrR(res) {
				this.src = res
			},
			saveQrcode() {
				this.$refs.qrcode2._saveCode()
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F7F9;
	}

	.con {
		padding: 92rpx 90rpx;
		.qrimg{
			padding: 93rpx 111rpx 70rpx;
		}
		.qrbox {
			width: 570rpx;
			height: 669rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}
	.btn{
		margin-top: 50rpx;
		width: 570rpx;
		height: 114rpx;
		background: linear-gradient(153deg, #FF8717, #FF5F00);
		border-radius: 57rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #fff;
		
	}
</style>
